function Enlarge (select) {
  this.ele = document.querySelector(select)
  this.show = this.ele.querySelector('.show')
  this.mask = this.ele.querySelector('.mask')
  this.list = this.ele.querySelector('.list')
  this.enlarge = this.ele.querySelector('.enlarge')
  this.show_width = this.show.clientWidth
  this.show_height = this.show.clientHeight
  this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
  this.mask_height = parseInt(window.getComputedStyle(this.mask).width)
  this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
  this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
  this.setScale()
  this.overOut()
  this.changeImg()
  this.move()
}
Enlarge.prototype.setScale = function () {
  this.enlarge_width = this.mask_width * this.bg_width / this.show_width
  this.enlarge_height = this.mask_height * this.bg_height / this.show_height
  this.enlarge.style.width = this.enlarge_width + 'px'
  this.enlarge.style.height = this.enlarge_height + 'px'
}
Enlarge.prototype.overOut = function () {
  this.show.addEventListener('mouseover', () => {
    this.mask.style.display = 'block'
    this.enlarge.style.display = 'block'
  })
  this.show.addEventListener('mouseout', () => {
    this.mask.style.display = 'none'
    this.enlarge.style.display = 'none'
  })
}
Enlarge.prototype.changeImg = function () {
  this.list.addEventListener('click', e => {
    if (e.target.nodeName !== 'IMG') return
      for (let i = 0; i < this.list.children.length; i++) {
            this.list.children[i].classList.remove('active')
          }
          e.target.classList.add('active')
          const show_url = e.target.dataset.show
          const enlarge_url = e.target.dataset.enlarge
          this.show.firstElementChild.src = show_url
          this.enlarge.firstElementChild.src = enlarge_url
  })
}
Enlarge.prototype.move = function () {
  this.show.addEventListener('mousemove', e => {
    let x = e.offsetX - this.mask_width / 2
    let y = e.offsetY - this.mask_height / 2
    if (x <= 0) x = 0
    if (y <= 0) y = 0
    if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
    if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
    this.mask.style.left = x + 'px'
    this.mask.style.top = y + 'px'
    const bg_x = x * this.enlarge_width / this.mask_width
    const bg_y = y * this.enlarge_height / this.mask_height
    this.enlarge.firstElementChild.style.left = -bg_x + 'px'
    this.enlarge.firstElementChild.style.top = -bg_y + 'px'
  })
}
/* 显示 */
// const topBox = document.querySelector('.xian > .ul > .top')
// const liBox = document.querySelector('.ul > ul')
// topBox.addEventListener('mouseover', () => {
//   liBox.style.display = 'block'
// })
// topBox.addEventListener('mouseout', () => {
//   liBox.style.display = 'none'
// })
// liBox.addEventListener('mouseover', () => {
//   liBox.style.display = 'block'
// })
// liBox.addEventListener('mouseout', () => {
//   liBox.style.display = 'none'
// })










/* 渲染 */
// const listBox = document.querySelector('.ul > ul')
// const contentBox = document.querySelector('.ul > ol')
// getGoodsList()
// async function getGoodsList() {
//   const reg = await pAjax({
//     url: '/yiji',
//     dataType: 'JSON'
//   })
//   // console.log(reg)
//   // console.log(reg.data.category)
//   // console.log(reg.data.category.length)
//   let ste = `
//   <li class="li">
//         <a href="../htnl/list.html">
//           <span></span>
//           全部...
//       </a>
//   </li>
//   `
//   reg.data.category.forEach(item => {
//     ste += `
//     <li data-id="${ item.id }">${ item.name }</li>
//     `
//   })
//   listBox.innerHTML = ste
// }
// listBox.addEventListener('mouseover', async e => {
//   if (e.target.nodeName === 'LI') {
//     const id = e.target.dataset.id
//     // console.log(id)

//     if (!id) return

//     const res = await pAjax({
//       url: '/caidan',
//       data: {
//         type: 'pc_index_category',
//         id: id
//       },
//       dataType: 'json'
//     })

//     // console.log(res)

//     let str = ''
//     res.data.secondary.forEach(item => {
//       str += `
//       <li>
//           <img src="${ item.pic }" alt="">
//           <span class="mz">${ item.name }</span>
//       </li>
//       `
//     })

//     contentBox.innerHTML = str
//   }
// })